import '../Scss/TestDataList.scss'
import { Http } from '../../Api'
import { useState, useEffect, useRef, Fragment } from 'react'
import { Area } from '@ant-design/plots'
import { useRequest, useSize, useBoolean } from 'ahooks'
import { Button, TreeSelect, message, Tabs, Descriptions, Spin, Result } from 'antd'
import { Video } from '../../Configure/Video'
import { ModalBox } from '../ModalBox'
import { Line } from '@ant-design/plots'

// 力值等折线图
export const LineChartsModal = ({ data }) => {
    const { chartsData, chartsSetUp } = data.data
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const LineSetUp = size => {
        const { width, height } = size
        return {
            data: chartsData,
            width,
            height,
            autoFit: false,
            appendPadding: 32,
            xField: 'label',
            ...chartsSetUp,
        }
    }
    return (
        <div className="LineChartsModal" ref={ChartsBox}>
            {size && <Line {...LineSetUp(size)} />}
        </div>
    )
}
// 张拉压浆匹配
export const TAPMate = ({ data, Off }) => {
    const [messageApi, contextHolder] = message.useMessage()
    const { url, componentId, actionRef } = data.data

    const [Value, setValue] = useState()
    const [options, setOptions] = useState([])

    const { runAsync: posData } = useRequest(Http, { manual: true })
    const { runAsync: getData } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const data = res.map(item => ({ beamNo: item.bridgeFullName, beamUuid: item.bridgeFullName, ...item }))
            setOptions(data)
        },
    })
    useEffect(() => {
        getData({ url: 'getLabTensionBridgeBeams' })
    }, [getData])

    const submit = () => {
        if (!Value || Value.length !== 36) {
            messageApi.info('请选择梁编号')
            return false
        }

        posData({ url, data: { componentId, beamUuid: Value } }).then(() => {
            actionRef.current.reload()
            Off()
        })
    }

    return (
        <div className="SelectModal">
            {contextHolder}
            <div>
                <div>桥梁 : </div>
                <TreeSelect
                    fieldNames={{ label: 'beamNo', value: 'beamUuid', children: 'beams' }}
                    treeData={options}
                    showSearch
                    treeDefaultExpandAll
                    value={Value}
                    onChange={e => setValue(e)}
                    treeNodeFilterProp="beamNo"
                />
            </div>
            <div>
                <Button type="primary" onClick={submit}>
                    匹配结果
                </Button>
            </div>
        </div>
    )
}

// 张拉压浆详情
export const TAPDetails = ({ data }) => {
    const { type, children, beamUuid } = data.data
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const { runAsync } = useRequest(Http, { margin: true })
    const [active, setActive] = useState({})
    const [items, setItems] = useState([])
    const [CameraData, setCameraData] = useState()

    const Active = e => setActive(children.find(v => v.uuid === e))

    const TypeList = {
        LabTension: {
            columns: [
                { label: '当前桥梁', value: beamUuid[active.beamUuid] },
                { label: '张拉断面', value: active.tensioningSection },
                { label: '张拉时间', value: active.tensioningDate },
                { label: '张拉力0', value: active.tensioningForce0 },
                { label: '张拉力1', value: active.tensioningForce1 },
                { label: '张拉力2', value: active.tensioningForce2 },
                { label: '张拉力3', value: active.tensioningForce3 },
                { label: '张拉力4', value: active.tensioningForce4 },
                { label: '伸长量0', value: active.elongation0 },
                { label: '伸长量1', value: active.elongation1 },
                { label: '伸长量2', value: active.elongation2 },
                { label: '伸长量3', value: active.elongation3 },
                { label: '伸长量4', value: active.elongation4 },
                { label: '油压0', value: active.oilPressure0 },
                { label: '油压1', value: active.oilPressure1 },
                { label: '油压2', value: active.oilPressure2 },
                { label: '油压3', value: active.oilPressure3 },
                { label: '油压4', value: active.oilPressure4 },
                { label: '设计张拉控制力', value: active.theoreticalElongation },
                { label: '总抻长量', value: active.totalElongation },
            ],
            charts: [
                {
                    title: '张拉曲线(Kn)',
                    data: 'forceCurve',
                    value: '力量',
                    fill: 'l(270) 0:#ffffff 0.5:#bae0ff 1:#1677ff',
                    color: '#1677ff',
                },
                {
                    title: '伸长曲线(mm)',
                    data: 'elongationCurve',
                    value: '长度',
                    fill: 'l(270) 0:#ffffff 0.5:#ffffb8 1:#fadb14',
                    color: '#fadb14',
                },
            ],
        },
        LabPulping: {
            columns: [
                { label: '当前桥梁', value: beamUuid[active.beamUuid] },
                { label: '压浆方向', value: active.pulpingOrientation },
                { label: '压浆时间', value: active.loadHoldingTime },
                { label: '配合比', value: active.mixProportion },
                { label: '水胶比', value: active.waterBinderRatio },
                { label: '搅拌时间', value: active.stirringTime },
                { label: '开始时间', value: active.startDate },
                { label: '结束时间', value: active.endDate },
                { label: '进浆压力', value: active.pulpingPressureIn },
                { label: '出浆压力', value: active.pulpingPressureOut },
                { label: '进浆量', value: active.pulpingVolume },
                { label: '理论浆量', value: active.standardVolume },
            ],
            charts: [
                {
                    title: '进浆压力曲线(Kn)',
                    data: 'pressureInCurve',
                    value: '力量',
                    fill: 'l(270) 0:#ffffff 0.5:#bae0ff 1:#1677ff',
                    color: '#1677ff',
                },
                {
                    title: '进浆量曲线(L)',
                    data: 'volumeCurve',
                    value: '升',
                    fill: 'l(270) 0:#ffffff 0.5:#ffffb8 1:#fadb14',
                    color: '#fadb14',
                },
            ],
        },
    }

    const AreaFunc = ({ value, fill, color, data }) => {
        const { width, height } = size
        const list = data.split(',').map((item, index) => ({ type: index, [value]: Number(item) }))
        return {
            autoFit: false,
            data: list,
            width,
            height: height / 2 - 40,
            appendPadding: 16,
            xField: 'type',
            yField: value,
            color: color,
            xAxis: { range: [0, 1], tickCount: 5 },
            areaStyle: () => ({ fill }),
        }
    }

    useEffect(() => {
        if (JSON.stringify(active) !== '{}' && active.cameraUuids.length !== 0)
            runAsync({ url: 'getCamera', data: { cameraUuid: active.cameraUuids[0] } }).then(res =>
                setCameraData(res.list[0]),
            )
        else setCameraData()
    }, [active, runAsync])

    useEffect(() => {
        const items = children.map(item => ({
            label: `${item.steelBeamNo}${item.tensioningSection || ''}`,
            key: item.uuid,
        }))
        setActive(children.find(v => v.uuid === items[0].key))
        setItems(items)
    }, [children])

    return (
        <div className="TAPDetails">
            <Tabs activeKey={active.uuid} items={items} centered onChange={Active} />
            <div className="Box">
                <div className="Left">
                    <Descriptions bordered size="small" column={1}>
                        {TypeList[type].columns.map(({ label, value }, index) => (
                            <Descriptions.Item key={index} label={label}>
                                {value}
                            </Descriptions.Item>
                        ))}
                    </Descriptions>
                    <div> {CameraData ? <Video data={CameraData} /> : '暂无监控画面'} </div>
                </div>
                <div className="Right" ref={ChartsBox}>
                    {TypeList[type].charts.map(({ title, value, fill, color, data }, index) => (
                        <div key={index}>
                            <div>{title}</div>
                            {size && <Area {...AreaFunc({ value, fill, color, data: active[data] })} />}
                        </div>
                    ))}
                </div>
            </div>
        </div>
    )
}

// 压力机详情
export const LabStressMachine = ({ data }) => {
    const { runAsync } = useRequest(Http, { manual: true })
    const testEvaluationList = { 0: '合格', 1: '不合格', 2: '无效', 3: '作废' }
    const [Data, setData] = useState()
    const [Length, setLength] = useState()
    const [loadValue, setLoadValue] = useState()
    const [compressive, setCompressive] = useState()
    const [processStress, setProcessStress] = useState()
    const [OptionsCall, setOptionsCall] = useState()

    useEffect(() => {
        const { uuid } = data.data
        runAsync({ url: 'getLabStressMachineID', path: [uuid] }).then(res => {
            const { cubeCount, loadValue, compressiveStrength, processStress } = res
            setData(res)
            setLength(cubeCount)
            setLoadValue(loadValue.split(','))
            setCompressive(compressiveStrength.split(','))
            setProcessStress(JSON.parse(processStress))
        })
    }, [data, runAsync])

    return (
        <div>
            <Descriptions bordered style={{ marginBottom: 8, background: 'white' }}>
                <Descriptions.Item label="试验机名称" span={3}>
                    {Data?.equipmentName}
                </Descriptions.Item>
                <Descriptions.Item label="试件编号">{Data?.cubeCode}</Descriptions.Item>
                <Descriptions.Item label="试验日期">{Data?.testDate}</Descriptions.Item>
                <Descriptions.Item label="试验面积">{Data?.cubeArea}</Descriptions.Item>
                <Descriptions.Item label="设计强度">{Data?.designStrength}</Descriptions.Item>
                <Descriptions.Item label="强度代表值">{Data?.representativeStrength}</Descriptions.Item>
                <Descriptions.Item label="评定结果">{testEvaluationList[Data?.testEvaluation]}</Descriptions.Item>
            </Descriptions>
            <Descriptions bordered style={{ background: 'white' }}>
                <Descriptions.Item label="试验类型" span={3}>
                    {Data?.testType}
                </Descriptions.Item>
                {Length &&
                    [...new Array(Length).keys()].map(key => (
                        <Fragment key={key}>
                            <Descriptions.Item label="荷载力值">{loadValue[key]}</Descriptions.Item>
                            <Descriptions.Item label="抗折/抗压强度"> {compressive[key]} </Descriptions.Item>
                            <Descriptions.Item label="详情">
                                <Button
                                    type="link"
                                    onClick={() => {
                                        const chartsData = processStress[key]
                                            .split(',')
                                            .map((item, index) => ({ 力值: Number(item), label: index }))
                                        const chartsSetUp = {
                                            yField: '力值',
                                            xAxis: {
                                                title: {
                                                    text: '时间/s',
                                                    position: 'end',
                                                    offsetX: 0,
                                                    style: { fill: '#262626', fontSize: 12 },
                                                },
                                                label: { style: { fill: '#262626', fontSize: 12 } },
                                            },
                                            yAxis: {
                                                title: {
                                                    text: '力值/KN',
                                                    position: 'end',
                                                    spacing: 24,
                                                    autoRotate: false,
                                                    style: { fill: '#262626', fontSize: 12 },
                                                },
                                                label: { style: { fill: '#262626', fontSize: 12 } },
                                            },
                                        }
                                        setOptionsCall({
                                            type: 'LineChartsModal',
                                            data: { title: '力值曲线', data: { chartsData, chartsSetUp } },
                                        })
                                    }}
                                >
                                    力值曲线
                                </Button>
                                <Button
                                    type="link"
                                    onClick={() => {
                                        const { originalDataTable, labHandleTypeUuid, startTime, endTime, testDate } =
                                            Data
                                        setOptionsCall({
                                            type: 'MonitorVideo',
                                            data: {
                                                title: '试验监控回放',
                                                data: {
                                                    url: 'getLabDataCameraByOriginalDataTable',
                                                    originalDataTable,
                                                    labHandleTypeUuid,
                                                    startTime,
                                                    endTime,
                                                    testDate,
                                                },
                                            },
                                        })
                                    }}
                                >
                                    视频回放
                                </Button>
                            </Descriptions.Item>
                        </Fragment>
                    ))}
            </Descriptions>
            <ModalBox OptionsCall={OptionsCall} />
        </div>
    )
}

// 万能机试验详情
export const LabUniversalRebar = ({ data }) => {
    const ClientData = JSON.parse(localStorage.getItem('ClientData'))
    const [messageApi, contextHolder] = message.useMessage()
    const { runAsync: getData } = useRequest(Http, { manual: true })
    const { runAsync: getLine } = useRequest(Http, { manual: true })
    const [Data, setData] = useState([])
    const [OptionsCall, setOptionsCall] = useState()

    useEffect(() => {
        const { groupId } = data.data
        getData({
            url: 'getLabDataByDisplayNo',
            data: { pageSize: 1000, displayNo: groupId, originalDataTable: 'Lab_LabUniversalRebar' },
        }).then(res => setData(res.list))
    }, [data, getData])

    const getLinkFun = (uuid, type) => {
        getLine({
            url: 'getLabProcessDataByUuid',
            data: { uuid, originalDataTable: 'Lab_LabUniversalRebar' },
        }).then(res => {
            const [{ timeProcess, forceProcess, displacementProcess }] = res.list
            if (type === 0) {
                if (!forceProcess) messageApi.info('暂无力值数据')
                else AssembleFun(type, timeProcess, forceProcess)
            } else {
                if (!displacementProcess) messageApi.info('暂无位移数据')
                else AssembleFun(type, timeProcess, displacementProcess)
            }
        })
    }
    const AssembleFun = (type, time, data) => {
        const typeList = [
            { value: '力值', text: '力值/KN', title: '力值曲线' },
            { value: '位移', text: '位移/mm', title: '位移曲线' },
        ]
        const dataArr = data.split(',')
        const timeArr = time.split(',')
        const { value, text, title } = typeList[type]
        const chartsData = dataArr.map((item, index) => ({ [value]: Number(item), label: timeArr[index] }))
        const chartsSetUp = {
            yField: value,
            xAxis: {
                title: {
                    text: '时间/s',
                    position: 'end',
                    offsetX: 0,
                    style: { fill: '#262626', fontSize: 12 },
                },
                label: { style: { fill: '#262626', fontSize: 12 } },
            },
            yAxis: {
                title: {
                    text,
                    position: 'end',
                    spacing: 24,
                    autoRotate: false,
                    style: { fill: '#262626', fontSize: 12 },
                },
                label: { style: { fill: '#262626', fontSize: 12 } },
            },
        }
        setOptionsCall({
            type: 'LineChartsModal',
            data: { title, data: { chartsData, chartsSetUp } },
        })
    }

    return (
        <div className="LabUniversalRebar">
            {contextHolder}
            {Data.map(item => (
                <Descriptions
                    key={item.uuid}
                    size="small"
                    column={4}
                    layout="vertical"
                    bordered
                    style={{ background: 'white' }}
                >
                    <Descriptions.Item label="试验类别" span={2}>
                        {item.testType}
                    </Descriptions.Item>
                    <Descriptions.Item label="试验时间" span={2}>
                        {item.testDate}
                    </Descriptions.Item>
                    <Descriptions.Item label="组织机构">
                        {ClientData.organization[item.organizationUuid]}
                    </Descriptions.Item>
                    <Descriptions.Item label="试验组号">{item.groupName}</Descriptions.Item>
                    <Descriptions.Item label="试件序号">{item.testCode}</Descriptions.Item>
                    <Descriptions.Item label="评定结果">{item.result}</Descriptions.Item>
                    <Descriptions.Item label="公称直径">{item.nominalDiameter}</Descriptions.Item>
                    <Descriptions.Item label="公称截面面积">{item.nominalSectionalArea}</Descriptions.Item>
                    <Descriptions.Item label="屈服力Fs(kN)">{item.lowerYield}</Descriptions.Item>
                    <Descriptions.Item label="屈服点RP(MPa)">{item.lowerYieldStrength}</Descriptions.Item>
                    <Descriptions.Item label="拉断最大力Fm(kN)">{item.maximumForce}</Descriptions.Item>
                    <Descriptions.Item label="抗拉强度Rm(MPa)">{item.bendingStrength}</Descriptions.Item>
                    <Descriptions.Item label="断后伸长率A(%)">{item.elongationPctAfter}</Descriptions.Item>
                    <Descriptions.Item label="最大力总延伸率(%)">{item.maximumTotalElongation}</Descriptions.Item>
                    <Descriptions.Item label="最大力总延伸率(%)">
                        <div className="options">
                            <Button type="primary" onClick={() => getLinkFun(item.uuid, 0)}>
                                力值曲线
                            </Button>
                            <Button type="primary" onClick={() => getLinkFun(item.uuid, 1)}>
                                位移曲线
                            </Button>
                            <Button
                                type="primary"
                                onClick={() => {
                                    const { originalDataTable, labHandleTypeUuid, startTime, endTime, testDate } = item
                                    setOptionsCall({
                                        type: 'MonitorVideo',
                                        data: {
                                            title: '试验监控回放',
                                            data: {
                                                url: 'getLabDataCameraByOriginalDataTable',
                                                originalDataTable,
                                                labHandleTypeUuid,
                                                startTime,
                                                endTime,
                                                testDate,
                                            },
                                        },
                                    })
                                }}
                            >
                                监控记录
                            </Button>
                        </div>
                    </Descriptions.Item>
                </Descriptions>
            ))}
            <ModalBox OptionsCall={OptionsCall} />
        </div>
    )
}

// 水泥拌合站详情
export const CementMixingStations = ({ data }) => {
    const { runAsync } = useRequest(Http, { manual: true })
    const [Data, setData] = useState()
    const [OneData, setOneData] = useState(['实际配⽐'])
    const [TwoData, setTwoData] = useState(['施⼯配⽐'])
    const TitleList = [
        '材料名称',
        '水1',
        '水2',
        '水泥1',
        '水泥2',
        '水泥3',
        '砂1',
        '砂2',
        '碎石1',
        '碎石2',
        '碎石3',
        '碎石4',
        '矿粉',
        '粉煤灰',
        '减水剂',
    ]
    useEffect(() => {
        const { url, uuid } = data.data
        runAsync({ url, path: [uuid] }).then(res => {
            const dataOne = [
                '实际配⽐',
                res.water1Act,
                res.water2Act,
                res.cement1Act,
                res.cement2Act,
                res.cement3Act,
                res.sand1Act,
                res.sand2Act,
                res.gravel1Act,
                res.gravel2Act,
                res.gravel3Act,
                res.gravel4Act,
                res.slagPowderAct,
                res.flyashAct,
                res.waterReducerAct,
            ]
            const dataTwo = [
                '施⼯配⽐',
                res.water1Oper,
                res.water2Oper,
                res.cement1Oper,
                res.cement2Oper,
                res.cement3Oper,
                res.sand1Oper,
                res.sand2Oper,
                res.gravel1Oper,
                res.gravel2Oper,
                res.gravel3Oper,
                res.gravel4Oper,
                res.slagPowderOper,
                res.flyashOper,
                res.waterReducerOper,
            ]
            setOneData(dataOne)
            setTwoData(dataTwo)
            setData(res)
        })
    }, [data, runAsync])
    return (
        <div className="MixingStations">
            {Data && (
                <Descriptions size="small" layout="vertical" bordered>
                    <Descriptions.Item label="设备编号">{Data.code}</Descriptions.Item>
                    <Descriptions.Item label="出料时间">{Data.dischargingTime}</Descriptions.Item>
                    <Descriptions.Item label="上传时间">{Data.uploadTime}</Descriptions.Item>
                    <Descriptions.Item label="施工配合比编号">{Data.proportionOperId}</Descriptions.Item>
                    <Descriptions.Item label="工程名">{Data.projectName}</Descriptions.Item>
                    <Descriptions.Item label="浇筑部位">{Data.pouringPosition}</Descriptions.Item>
                    <Descriptions.Item label="强度等级">{Data.strengthGrade}</Descriptions.Item>
                    <Descriptions.Item label="理论方量">{Data.quantityOper}m³</Descriptions.Item>
                    <Descriptions.Item label="实际方量">{Data.quantityAct}m³</Descriptions.Item>
                </Descriptions>
            )}
            {Data && (
                <Descriptions size="small" column={2} bordered>
                    <Descriptions.Item label="水胶比(实际⽤量)">{Data.waterBinderRatio}%</Descriptions.Item>
                    <Descriptions.Item label="⽔灰⽐(实际⽤量)">{Data.waterCementRatioAct}%</Descriptions.Item>
                    <Descriptions.Item label="水胶比(理论⽤量)">{Data.waterBinderRatioOper}%</Descriptions.Item>
                    <Descriptions.Item label="⽔灰⽐(理论⽤量)">{Data.waterCementRatioOper}%</Descriptions.Item>
                    <Descriptions.Item label="砂率值">{Data.sandRatio}%</Descriptions.Item>
                </Descriptions>
            )}
            <div className="tips"> 表中数据如无特殊说明,默认单位(Kg) </div>
            <div className="MixingList">
                {TitleList.map((item, index) => (
                    <div key={index}>
                        <div>{item}</div>
                        <div>{OneData[index]}</div>
                        <div>{TwoData[index]}</div>
                    </div>
                ))}
            </div>
            <div className="tips" style={{ color: 'red' }}>
                {' '}
                表中水胶比、水灰比、砂率值仅供参考{' '}
            </div>
        </div>
    )
}

// 沥青拌合站详情
export const LabAsphalt = ({ data }) => {
    const { runAsync } = useRequest(Http, { manual: true })
    const [Data, setData] = useState()
    const [OneData, setOneData] = useState(['实际用量'])
    const [TwoData, setTwoData] = useState(['材料百分比'])
    const [ThrData, setThrData] = useState(['理论配合比'])
    const TitleList = ['材料名称', '⻣料1', '⻣料2', '⻣料3', '⻣料4', '⻣料5', '⻣料6', '矿粉', '⽔泥', '再⽣料']
    useEffect(() => {
        const { url, uuid } = data.data
        runAsync({ url, path: [uuid] }).then(res => {
            const dataOne = [
                '实际用量 (Kg)',
                res.sand1Act,
                res.sand2Act,
                res.gravel1Act,
                res.gravel2Act,
                res.gravel3Act,
                res.gravel4Act,
                res.cement1Act,
                res.slagPowderAct,
                res.recycledMaterialAct,
            ]
            const dataTwo = [
                '材料百分比 (%)',
                res.sand1ActPct,
                res.sand2ActPct,
                res.gravel1ActPct,
                res.gravel2ActPct,
                res.gravel3ActPct,
                res.gravel4ActPct,
                res.slagPowderActPct,
                res.cement1ActPct,
                res.recycleMaterialActPct,
            ]
            const dataThr = [
                '理论配合比 (%)',
                res.sand1Theo,
                res.sand2Theo,
                res.gravel1Theo,
                res.gravel2Theo,
                res.gravel3Theo,
                res.gravel4Theo,
                res.slagPowderTheo,
                res.cement1Theo,
                res.recycleMaterialTheo,
            ]

            setOneData(dataOne)
            setTwoData(dataTwo)
            setThrData(dataThr)
            setData(res)
        })
    }, [data, runAsync])
    return (
        <div className="MixingStations">
            {Data && (
                <Descriptions size="small" layout="vertical" bordered>
                    <Descriptions.Item label="设备编号">{Data.equipmentCode}</Descriptions.Item>
                    <Descriptions.Item label="工程名">{Data.engineeringName}</Descriptions.Item>
                    <Descriptions.Item label="施工地点">{Data.constructionSite}</Descriptions.Item>
                    <Descriptions.Item label="出料时间">{Data.dischargingTime}</Descriptions.Item>
                    <Descriptions.Item label="采集时间">{Data.collectionTime}</Descriptions.Item>
                    <Descriptions.Item label="上传时间">{Data.uploadTime}</Descriptions.Item>
                    <Descriptions.Item label="施工用量">{Data.asphaltAct}Kg</Descriptions.Item>
                    <Descriptions.Item label="油石比">{Data.asphaltAggregateRatioAct}%</Descriptions.Item>
                    <Descriptions.Item label="搅拌时长">{Data.mixingDuration}</Descriptions.Item>
                </Descriptions>
            )}
            {Data && (
                <Descriptions size="small" column={2} bordered>
                    <Descriptions.Item label="油石比(实际配合比)">{Data.asphaltAggregateRatioAct}%</Descriptions.Item>
                    <Descriptions.Item label="沥青(实际⽤量)">{Data.asphaltAct}Kg</Descriptions.Item>
                    <Descriptions.Item label="油石比(理论配合比)">{Data.asphaltAggregateRatioTheo}%</Descriptions.Item>
                    <Descriptions.Item label="沥青(施⼯用量)">{Data.asphaltTheo}Kg</Descriptions.Item>
                </Descriptions>
            )}
            <div className="MixingList">
                {TitleList.map((item, index) => (
                    <div key={index}>
                        <div>{item}</div>
                        <div>{OneData[index] || 0}</div>
                        <div>{TwoData[index] || 0}</div>
                        <div>{ThrData[index] || 0}</div>
                    </div>
                ))}
            </div>
        </div>
    )
}

// 沥青拌合站集配
export const LabAsphaltCentralized = ({ data }) => {
    const [Type] = useState({ 1: '上限', 2: '下限', 3: '理论', 4: '实际' })
    const [Status, { setTrue }] = useBoolean(false)
    const [Data, setData] = useState()

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { list } = res
            if (list.length !== 0) {
                const chartsData = list.flatMap(item => {
                    const {
                        curveType,
                        sieve075,
                        sieve15,
                        sieve30,
                        sieve60,
                        sieve118,
                        sieve236,
                        sieve475,
                        sieve950,
                        sieve1320,
                        sieve1600,
                        sieve1900,
                        sieve2650,
                        sieve3150,
                    } = item
                    const data = [
                        { name: Type[curveType], time: '0.075', value: sieve075 },
                        { name: Type[curveType], time: '0.15', value: sieve15 },
                        { name: Type[curveType], time: '0.3', value: sieve30 },
                        { name: Type[curveType], time: '0.6', value: sieve60 },
                        { name: Type[curveType], time: '1.18', value: sieve118 },
                        { name: Type[curveType], time: '2.36', value: sieve236 },
                        { name: Type[curveType], time: '4.75', value: sieve475 },
                        { name: Type[curveType], time: '9.5', value: sieve950 },
                        { name: Type[curveType], time: '13.2', value: sieve1320 },
                        { name: Type[curveType], time: '16', value: sieve1600 },
                        { name: Type[curveType], time: '19', value: sieve1900 },
                        { name: Type[curveType], time: '26.5', value: sieve2650 },
                        { name: Type[curveType], time: '31.5', value: sieve3150 },
                    ]
                    return data
                })
                const config = {
                    data: chartsData,
                    width: 1152,
                    height: 600,
                    autoFit: false,
                    xField: 'time',
                    yField: 'value',
                    seriesField: 'name',
                    color: ['#EDC240', '#AFD8F8', '#CB4B4B', '#4EAB4E'],
                    xAxis: { label: { style: { fill: '#262626', fontSize: 12 } } },
                    yAxis: { label: { style: { fill: '#262626', fontSize: 12 } } },
                }
                setData(config)
                setTrue()
            } else setTrue()
        },
    })

    useEffect(() => {
        runAsync({ url: 'getAsphaltCurveData', data: { dataNumber: data.data.uuid } })
    }, [data, runAsync])

    return (
        <div className="LabAsphaltCentralized">
            {Status ? (
                <div>
                    {Data ? (
                        <div className="Link">{Data && <Line {...Data} />}</div>
                    ) : (
                        <Result status="404" title="暂无集配数据" />
                    )}
                </div>
            ) : (
                <Spin size="large" />
            )}
        </div>
    )
}
// 钢筋保护层
export const LabCoverProtector = ({ data }) => {
    const [ChartsData, setChartsData] = useState()
    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            if (list.length === 0) return false
            let [{ designThickness, designThickness1, designThickness2, curve }] = list
            let data = curve.split(',').map((item, index) => ({ date: index, 厚度: Number(item) }))
            const config = {
                data,
                width: 1152,
                height: 600,
                autoFit: false,
                color: '#37C8CA',
                xField: 'date',
                yField: '厚度',
                annotations: [
                    {
                        type: 'line',
                        start: ['start', designThickness],
                        end: ['end', designThickness],
                        text: {
                            content: `设计厚度 ${designThickness}`,
                            position: 'right',
                            offsetY: 18,
                            style: { fill: '#7143EA', textAlign: 'right' },
                        },
                        style: { lineDash: [1, 1], stroke: '#7143EA' },
                    },
                    {
                        type: 'line',
                        start: ['start', designThickness1],
                        end: ['end', designThickness1],
                        text: {
                            content: `设计厚度上限 ${designThickness1}`,
                            position: 'right',
                            offsetY: 18,
                            style: { fill: '#5AAAE5', textAlign: 'right' },
                        },
                        style: { lineDash: [2, 2], stroke: '#5AAAE5' },
                    },
                    {
                        type: 'line',
                        start: ['start', designThickness2],
                        end: ['end', designThickness2],
                        text: {
                            content: `设计厚度下限 ${designThickness2}`,
                            position: 'right',
                            offsetY: 18,
                            style: { fill: '#EA8B3B', textAlign: 'right' },
                        },
                        style: { lineDash: [2, 2], stroke: '#EA8B3B' },
                    },
                ],
                xAxis: {
                    title: {
                        text: '点位',
                        position: 'end',
                        offsetX: 0,
                        style: { fill: '#262626', fontSize: 12 },
                    },
                    label: { style: { fill: '#262626', fontSize: 12 } },
                },
                yAxis: {
                    title: {
                        text: '厚度值',
                        position: 'end',
                        spacing: 24,
                        autoRotate: false,
                        style: { fill: '#262626', fontSize: 12 },
                    },
                    label: { style: { fill: '#262626', fontSize: 12 } },
                },
            }
            setChartsData(config)
        },
    })

    useEffect(() => {
        runAsync({ url: 'getLabCoverProtectorGetLabCoverProtectorsList', data: { uuid: data.data.uuid } })
    }, [data, runAsync])

    return <div className="LabCoverProtector">{ChartsData && <Line {...ChartsData} />}</div>
}
// 回弹仪
export const LabReboundHammer = ({ data }) => {
    const [Data, setData] = useState()
    const [DataLength, setDataLength] = useState(1)

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            if (list.length !== 0) {
                const [{ reboundData }] = list
                setDataLength(reboundData.split(',').length)
                setData(list)
            }
        },
    })

    useEffect(() => {
        runAsync({ url: 'getLabReboundHammerGetLabReboundHammerAreaNo', data: { uuid: data.data.uuid } })
    }, [data, runAsync])

    const [Title] = useState([
        { uuid: '1', flex: 1, title: '测区' },
        { uuid: '2', title: '回弹值 - Ri' },
        { uuid: '3', flex: 2, title: '构件强度' },
        { uuid: '4', flex: 2, title: '回弹平均值 - Rm' },
        { uuid: '5', flex: 2, title: '碳化深度值 /mm' },
        { uuid: '6', flex: 1, title: '碳化平均值' },
    ])

    const [color] = useState(['#FF2020', '#15ADFF'])

    return (
        <div className="LabReboundHammerModal">
            <div className="Title">
                {DataLength &&
                    Title.map(({ uuid, title, flex }) => {
                        if (uuid === '2') {
                            return (
                                <div key={uuid} style={{ flex: DataLength }}>
                                    <div>{title}</div>
                                    <div>
                                        {[...new Array(DataLength).keys()].map(key => (
                                            <div key={key}>{key + 1}</div>
                                        ))}
                                    </div>
                                </div>
                            )
                        } else {
                            return (
                                <div key={uuid} style={{ flex }}>
                                    {title}
                                </div>
                            )
                        }
                    })}
            </div>
            <div className="List">
                {Data &&
                    Data.map(
                        ({
                            areaNo,
                            carbonizationAvg,
                            carbonationDepthofcomponents,
                            componentStrength,
                            reboundData,
                            reboundAvg,
                        }) => (
                            <div key={areaNo}>
                                <div style={{ flex: Title[0].flex }}> {areaNo} </div>
                                <div style={{ flex: DataLength }}>
                                    {(() => {
                                        const arr = reboundData.split(',')
                                        const orj = arr.map((item, index) => ({ number: index, value: item }))
                                        orj.sort((a, b) => a.value.localeCompare(b.value))
                                        const smallArr = [orj.at(1).number, orj.at(2).number, orj.at(3).number]
                                        const bigArr = [orj.at(-1).number, orj.at(-2).number, orj.at(-3).number]
                                        return arr.map((item, index) => (
                                            <div
                                                key={index}
                                                style={{
                                                    color:
                                                        bigArr.indexOf(index) !== -1
                                                            ? color[0]
                                                            : smallArr.indexOf(index) !== -1
                                                            ? color[1]
                                                            : ''
                                                            ? '#f8f8f8'
                                                            : '#262626',
                                                    fontWeight:
                                                        bigArr.indexOf(index) !== -1 || smallArr.indexOf(index) !== -1
                                                            ? '900'
                                                            : '100',
                                                }}
                                            >
                                                {item}
                                            </div>
                                        ))
                                    })()}
                                </div>
                                <div style={{ flex: Title[2].flex }}>{componentStrength}</div>
                                <div style={{ flex: Title[3].flex }}>{reboundAvg}</div>
                                <div style={{ flex: Title[4].flex }}>{carbonizationAvg}</div>
                                <div style={{ flex: Title[5].flex }}>{carbonationDepthofcomponents}</div>
                            </div>
                        ),
                    )}
            </div>
            <div className="tip">
                <div>
                    * <span style={{ color: color[0] }}>红色</span>高亮为最大值,
                    <span style={{ color: color[1] }}>蓝色</span>高亮为最小值
                </div>
                <div>* 回弹值除去三个最大值和三个最小值后计算出回弹平均值</div>
            </div>
        </div>
    )
}
